<template>
	<view>
		<!-- 头部搜索框 -->
		<search :placeholder="$t('homepage.QualityControl.bingNo')" />
		<!-- 信息列表 -->
		<zy-group :title="$t('homepage.QualityControl.infoList')">
			<scroll-view scroll-y="true" style="height:30vh">
				<zy-forms :model="formData" border labelWidth="110">
					<zy-form-item :label="$t('homepage.QualityControl.productNo')+$t('public.colon')"><text
							class="formText">{{formData.productNo || $t('public.null')}}</text>
					</zy-form-item>
					<zy-form-item :label="$t('public.styleNo')+$t('public.colon')"><text
							class="formText">{{formData.styleNo || $t('public.null')}}</text>
					</zy-form-item>
					<zy-form-item :label="$t('public.styleName')+$t('public.colon')"><text
							class="formText">{{formData.styleName || $t('public.null')}}</text>
					</zy-form-item>
					<zy-form-item :label="$t('public.part')+$t('public.colon')"><text
							class="formText">{{formData.part || $t('public.null')}}</text>
					</zy-form-item>
					<zy-form-item :label="$t('public.num')+$t('public.colon')"><text
							class="formText">{{formData.num || $t('public.null')}}</text></zy-form-item>
					<zy-form-item :label="$t('public.color')+$t('public.colon')"><text
							class="formText">{{formData.color || $t('public.null')}}</text></zy-form-item>
					<zy-form-item :label="$t('public.size')+$t('public.colon')"><text
							class="formText">{{formData.size || $t('public.null')}}</text></zy-form-item>
					<zy-form-item :label="$t('homepage.QualityControl.bingNo')+$t('public.colon')"><text
							class="formText">{{formData.bundleNum || $t('public.null')}}</text></zy-form-item>
					<zy-form-item :label="$t('homepage.QualityControl.planNo')+$t('public.colon')"><text
							class="formText">{{formData.planNum || $t('public.null')}}</text></zy-form-item>
				</zy-forms>
			</scroll-view>
		</zy-group>
		<!-- 问题数量 -->
		<zy-group :title="$t('homepage.QualityControl.questionNUm')">
			<view class="line">
				<text class="line_text">{{$t('homepage.QualityControl.questionNUm')}}{{$t('public.colon')}}</text>
				<zy-number-box integer :min="0" @change="questionNumChange"></zy-number-box>
			</view>
		</zy-group>
		<!-- 生产数据 -->
		<zy-group :title="$t('homepage.QualityControl.defectEntry')">
			<zy-table :headList="headList" :dataList="dataList" :operationList="operationList" border></zy-table>
		</zy-group>
		<!-- 底部按钮 -->
		<bottomBtn fixed :leftText="$t('public.reset')" :rightText="$t('public.submit')" :leftDisabled="leftDisabled"
			:rightDisabled="rightDisabled" @rightBtn="submitBtn" @leftBtn="resetBtn">
		</bottomBtn>
	</view>
</template>

<script>
	import {
		getEntityByField,
		saveMaterialPick
	} from "@/api/homepage.js"
	export default {
		components: {},
		data() {
			return {
				leftDisabled: true,
				rightDisabled: true,
				//信息列表字段
				formData: {
					productNo: '',
					styleNo: '',
					styleName: '',
					part: '',
					num: '',
					color: '',
					size: '',
					bundleNum: '',
					planNum: '',
				},
				questionNum: 0, //问题数量
				//疵点录入表格表头
				headList: [{
					name: this.$t('public.procedureName'),
					key: 'procedureName',
				}, {
					name: this.$t('homepage.QualityControl.staff'),
					key: 'staff',
				}],
				dataList: [], //疵点录入表格数据
				//疵点录入表格操作列
				operationList: [{
					kind: "button",
					type: "primary",
					handle: this.entryBtn,
					label: this.$t('homepage.QualityControl.enter'),
				}],
				alterDataList: [],
				data: []
			}
		},
		onLoad() {
			//PDA扫描
			var _this = this
			uni.$on('scancodedate', function(data) {
				_this.searchList(data.code)
			})
			//生产列表选择表单
			uni.$on('formData', function(data) {
				_this.formData = data
			})
			// 监听疵点数量改完的数据
			uni.$on('updateData', function(data) {
				_this.dataList.forEach((item, index) => {
					if (item.staff == data.staff) {
						_this.$set(_this.dataList, index, data)
						_this.alterDataList = _this.dataList
					}
				})
			})
		},
		onUnload() {
			// 移除监听事件      
			uni.$off('scancodedate')
			uni.$off('formData')
			uni.$off('updateData')
		},
		watch: {
			alterData: {
				handler(n, o) {
					if (n.alterDataList.length > 0) {
						if (n.alterDataList !== this.$options.data().data && n.questionNum > 0) {
							this.rightDisabled = false
						} else {
							this.rightDisabled = true
						}
					}
				},
			}
		},

		computed: {
			alterData() {
				return {
					alterDataList: this.alterDataList,
					questionNum: this.questionNum
				}
			}
		},
		methods: {
			//搜索内容查询
			searchList(e) {
				this.leftDisabled = false
				getEntityByField({
					fieldName: 'barcode',
					fieldValue: e
				}).then((res) => {
					if (res.code == 0) {
						this.dataList.push(res.data)
					} else {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 3000
						})
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 3000
					})
				});
			},
			//疵点录入选择事件
			entryBtn(e) {
				uni.navigateTo({
					url: './list?defectData=' + JSON.stringify(e)
				})
			},
			// 问题数量输入
			questionNumChange(e) {
				this.questionNum = e
			},
			// 重置事件
			resetBtn() {
				uni.redirectTo({
					url: "/pages/HomePage/QualityControl/index"
				})
			},
			//提交事件
			submitBtn() {
				// saveMaterialPick({
				// 	productionTaskId: this.formData.id,
				// 	dataArray: JSON.stringify(this.dataList),
				// }).then((res) => {
				// 	if (res.code == 0) {
				// 		uni.showToast({
				// 			title: res.message,
				// 			icon: "none",
				// 			duration: 3000
				// 		})
				uni.redirectTo({
					url: "/pages/HomePage/QualityControl/index"
				})
				// 	} else {
				uni.showToast({
					title: "提交成功",
					icon: "none",
					duration: 3000
				})
				// }
				// }).catch((res) => {
				// 	uni.showToast({
				// 		title: res.message,
				// 		icon: "none",
				// 		duration: 3000
				// 	})
				// });
			},
		}
	}
</script>

<style lang="scss" scoped>
	.formList {
		display: flex;
	}

	.formText {
		color: #999;
	}

	.formBtn {
		right: 20rpx;
		position: absolute;
	}

	.line {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		padding: 0 50rpx;
	}

	.line_text {
		margin: auto 0;
	}
</style>